<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import AllWkOrder from './allWkOrder.vue'
import QualityWkOrder from './qualityWkOrder.vue'

// 当前激活的tab
const activeTab = ref('all')

// 子组件引用
const qualityWkOrderRef = ref()
const allWkOrderRef = ref()


// 质检工单数据状态
const qualityWorkOrders = ref<any[]>([])

// 提供质检工单数据给子组件
provide('qualityWorkOrders', qualityWorkOrders)

// 处理tab切换
const handleTabChange = (tabName: string) => {
  console.log('切换到tab:', tabName)
  activeTab.value = tabName
  
  // 当切换到质检工单TAB时，调用查询方法
  if (tabName === 'quality' && qualityWkOrderRef.value) {
    // 使用 nextTick 确保组件已经渲染完成
    nextTick(() => {
      qualityWkOrderRef.value?.handleSearch()
    })
  }
}

// 更新质检工单数据的方法
const updateQualityWorkOrders = (orders: any[]) => {
  qualityWorkOrders.value = orders
}

// 提供更新方法给子组件
provide('updateQualityWorkOrders', updateQualityWorkOrders)
</script>

<template>
  <div class="quality-work-order-container">
    <!-- Tab标签页 -->
    <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="work-order-tabs">
      <ElTabPane label="全部工单" name="all">
        <AllWkOrder ref="allWkOrderRef" />
      </ElTabPane>
      <ElTabPane label="质检工单" name="quality">
        <QualityWkOrder ref="qualityWkOrderRef" />
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<style lang="scss" scoped>
.quality-work-order-container {
  height: 100%;
  background-color: #f5f5f5;
}

.work-order-tabs {
  height: 100%;
  
  :deep(.el-tabs__content) {
    height: calc(100% - 55px);
    overflow: hidden;
  }
  
  :deep(.el-tab-pane) {
    height: 100%;
  }
  
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid #e4e7ed;
  }
  
  :deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
  }
  
  :deep(.el-tabs__item) {
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    font-weight: 500;
    
    &.is-active {
      color: #286af6;
      font-weight: 600;
    }
  }
  
  :deep(.el-tabs__active-bar) {
    background-color: #286af6;
    height: 3px;
  }
}
</style>
